<template>
	<view>
		<view class="header">
			<i class="ri-function-fill" style="color:#7800BE;font-size:12px;"></i>
			<!-- <i-icon size="20upx" color="#7800BE" name="function-fill"></i-icon> -->
			控制台
			<i class="ri-arrow-right-s-line" style="color:#666;font-size:12px;"></i>
			<!-- <i-icon size="20upx" color="#666" name="arrow-right-s-line"></i-icon> -->
			站点管理
		</view>
		<view class="bl">
			<view class="h1">
				<i class="ri-home-6-fill" style="color:#7800BE;font-size:26px;"></i>
				站点管理
			</view>
			<view class="r30">
				<button type="button" @click="addNode(0,0)">
					<i class="ri-add-circle-fill" style="color:#fff;font-size:12px;"></i>
					<!-- <i-icon size="20upx" color="#FFF" name="add-circle-fill"></i-icon> -->
					添加站点
				</button>
			</view>
		</view>
		<view v-if="tree.length == 0">
			<td colspan="5" style="text-align: center;color:#9c9c9c; ">暂无数据，请添加</td>
		</view>
		<view class="p-table" v-else>
			<table class="pure-table pure-table-horizontal">
				<tr v-if="tree.length != 0">
					<th>序号</th>
					<th>站点名称</th>
					<th>所在区域</th>
					<th>地址</th>
					<th>站长</th>
					<th>所属物业</th>
					<th>常规服务</th>
					<th>废旧回收</th>
					<th>操作</th>
				</tr>
				<tr v-for="(item,index) in tree" :key="index">
					<td>
						<text>{{item.id}}</text>
					</td>
					<td>
						<text>{{item.villageName}}</text>
					</td>
					<td>
						<text>{{item.area}}</text>
					</td>
					<td>
						<text>{{item.villageAddress}}</text>
					</td>
					<td>
						<text>{{item.villageAgent}}</text>
					</td>
					<td>
						<text>{{item.villageProperty}}</text>
					</td>
					<td>
						<view class="bz" v-if="item.cgState != '禁用'">
							<i class="ri-checkbox-circle-fill" style="color:#7800BE;font-size:12px;"></i>
							<!-- <i-icon class="r10" size="20upx" color="#7800BE" name="checkbox-circle-fill"></i-icon> -->
							开启
						</view>
						<view class="bz" v-else>
							<i class="ri-checkbox-circle-fill" style="color:#f73164;font-size:12px;"></i>
							<!-- <i-icon class="r10" size="20upx" color="#f73164" name="checkbox-circle-fill"></i-icon> -->
							禁止
						</view>
					</td>
					<td>
						<view class="bz" v-if="item.lajiState != '禁用'">
							<i class="ri-checkbox-circle-fill" style="color:#7800BE;font-size:12px;"></i>
							<!-- <i-icon class="r10" size="20upx" color="#7800BE" name="checkbox-circle-fill"></i-icon> -->
							开启
						</view>
						<view class="bz" v-else>
							<i class="ri-checkbox-circle-fill" style="color:#f73164;font-size:12px;"></i>
							<!-- <i-icon class="r10" size="20upx" color="#f73164" name="checkbox-circle-fill"></i-icon> -->
							禁止
						</view>
					</td>
					<td class="bz">
						<button
							@click="editNode(item.villageName,item.area,item.villageAddress,item.villageAgent,item.villageProperty,item.id,item)"
							class="r10">
							<i class="ri-pencil-fill" style="color:#fff;font-size:12px;"></i>
							<!-- <i-icon size="20upx" color="#FFF" name="pencil-fill"></i-icon> -->
							编辑
						</button>
						<button type="button" class="b-dell" @click="delNode(item)">
							<i class="ri-delete-bin-line" style="color:#333;font-size:12px;"></i>
							<!-- <i-icon size="20upx" color="#333" name="delete-bin-line"></i-icon> -->
							删除
						</button>
					</td>
				</tr>
			</table>
			<view class="bz">
				<Pagination :total="total" :pageSize="size" :nowPage="current" @change="alterCurrent"></Pagination>
				<picker mode="selector" :range="[10,20,30,50,100]"
					@change="size=[10,20,30,50,100][$event.detail.value];current=1;init()" class="p-selector">
					{{size}}条/页
				</picker>
			</view>
		</view>
	</view>
</template>

<script>
	import Pagination from "@/components/pagination.vue"
	export default {
		components: {
			Pagination
		},
		data() {
			return {
				pages: 0,
				total: 0,
				current: 1,
				size: 20,
				tree: [],
				node: {},
				add: false,
				editById: '',
				delById: '',
				testData: [{
						id: 1,
						name: '名称',
						data: '2020-2-2'
					},
					{
						id: 2,
						name: '名称',
						data: '2020-2-2'
					},
					{
						id: 3,
						name: '名称',
						data: '2020-2-2'
					},
					{
						id: 4,
						name: '名称',
						data: '2020-2-2'
					}
				]
			}
		},
		methods: {
			alterCurrent: function(c) {
				if (c) {
					if (c <= this.pages && c >= 1) {
						this.current = c;
						this.init()
					}
				}
			},
			init: function() {
				uni.showLoading()
				let _this = this;
				uni.request({
					url: this.baseURL + '/guiminSite/list?current=' + _this.current + '&size=' + _this.size,
					method: 'POST',
					header: {
						'token': uni.getStorageSync('token')
					},
					success: function(res) {
						console.log(res)
						let data = res.data;
						if (res.statusCode == 500) {
							uni.hideLoading()
							uni.showToast({
								title: "当前未登录，请先登录",
								duration: 3000,
								icon: 'error'
							});
							return;
						}
						if (data.success == true) {
							uni.hideLoading()
							let trueData = data.data;
							_this.tree = trueData.records
							_this.pages = parseInt(trueData.pages)
							_this.total = parseInt(trueData.total)
							_this.current = parseInt(trueData.current)
							_this.size = parseInt(trueData.size)
						} else {
							uni.hideLoading()
							uni.showToast({
								title: data.msg || data.message,
								icon: 'error',
								duration: 3000
							})
						}
					},
					fail: function(err) {
						uni.hideLoading()
						uni.showToast({
							title: "用户未登录",
							duration: 2500,
							icon: 'error'
						})
					}
				});
			},
			addNode: function(item, _add) {
				uni.navigateTo({
					url: 'station-add'
				})
			},
			editNode: function(name, qy, dz, zz, wy, id, item) {
				if (item) {
					uni.setStorageSync('stationInfo', JSON.stringify(item))
				}
				uni.redirectTo({
					url: 'station-list?name=' + name + '&qy=' + qy + '&dz=' + dz + '&zz=' + zz + '&wy=' + wy +
						'&id=' + id
				})
			},
			delNode: function(item) {
				let _t_s_ = this;
				uni.showModal({
					content: '确认要删除\"' + item.villageName + '\"站点吗？',
					success: function(res) {
						if (res.confirm) {
							console.log(item.name)
							//相关删除操作
							uni.request({
								url: _t_s_.baseURL + '/guiminSite/delete/name?name=' + item
									.villageName,
								method: 'GET',
								header: {
									'content-type': 'application/json;carset=utf-8',
									'token': uni.getStorageSync('token')
								},
								success: function(res) {
									console.log(res)
									if (res.data.success == true) {
										uni.showToast({
											title: '删除成功',
											duration: 2000,
											icon: 'success'
										})
										_t_s_.init(); //刷新页面
									} else {
										uni.showToast({
											title: res.data.message,
											duration: 2000,
											icon: 'error'
										})
									}
								}
							})
						} else {
							console.log("用户点击了取消")
						}
					}
				})
			}
		},
		onLoad: function() {
			this.init()
			//this.tree = this.testData;
		}
	}
</script>
